<template>
  <div id="iox">
    <!--头部-->
    <headModule :lcheader='lcheader' />
    <!--导航-->
    <navigation />
    <!--主体部分-->
    <div class="conter">
      <!--左侧导航-->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item v-for="(item, index) in lclist.goods" :key="index">
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
      <!--右侧详情-->
      <div class="y1">
        <p class="p1">单人特色套餐</p>

        <div>
          <div>img</div>
          <div>
            <p><b>标题</b></p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <bottomModule />
  </div>
</template>
<script>
import navigation from "../components/homepage/navigation";
import bottomModule from "../components/homepage/bottomModule";
import headModule from '../components/homepage/headModule'
export default {
  components: {
    navigation,
    bottomModule,
    headModule,
  },
  name: "",
  data() {
    return {
      active: 1,
      activeKey: 0,
      lclist: [], //左侧导航
      lcheader: {}, //头部数据
      lcright: [], //右侧数据

    };
  },
  mounted() {
    this.lcgetlist();
  },
  methods: {
    //获取本地数据
    lcgetlist() {
      this.$axios.get("/json/data.json").then((res) => {
        console.log(res);
        this.lclist = res;
        this.lcheader = res.seller;
        // this.lcright = res.goods
        // console.log(res.goods);
      });
    },
    //左侧导航
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>


.conter {
  display: flex;
  padding: 0px;
  margin-bottom: 48px;
  .el-menu {
    padding: 0px;
    width: 80px;

    .el-menu-item {
      padding: 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: black;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .y1 {
    width: 100%;
    .p1 {
      flex: 1;
      font-size: 12px;
      color: rgb(147, 153, 159);
      display: block;
      border-left: 2px solid #d9dde1;
      height: 26px;
      line-height: 26px;
      padding-left: 14px;
      background-color: #f3f5f7;
    }
  }
}
</style>
